<template>
  <div class="lineChart-container" style="width: 100%; height: 400px">
    <div id="lineChart" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import * as echarts from "echarts/core";
import {
  GridComponent,
  GridComponentOption,
  TitleComponent,
  TitleComponentOption,
  LegendComponent,
  LegendComponentOption,
  MarkLineComponent,
  MarkLineComponentOption,
} from "echarts/components";
import { LineChart, LineSeriesOption } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
// 注册必要的组件
echarts.use([
  GridComponent,
  LineChart,
  UniversalTransition,
  CanvasRenderer,
  TitleComponent,
  LegendComponent,
  MarkLineComponent,
]);
// 将类型定义在顶部
type EChartsOption = echarts.ComposeOption<
  | GridComponentOption
  | LineSeriesOption
  | TitleComponentOption
  | LegendComponentOption
  | MarkLineComponentOption
>;
@Component({
  name: "lineChart",
})
export default class lineChart extends Vue {
  created() {
    this.pastDays = this.getPastDays();
  }
  mounted() {
    this.initChart();
    setTimeout(() => {
      this.drawChart();
    }, 1000);
  }
  myChart: any;
  pastDays: string[] = [];
  data: any;
  // 1.绘图准备
  initChart() {
    var chartDom = document.getElementById("lineChart");
    this.myChart = echarts.init(chartDom, "macarons");
    // 数据加载动画
    this.myChart.showLoading();
  }
  //   绘制图表
  drawChart() {
    // 隐藏数据加载动画
    this.myChart.hideLoading();
    var option: EChartsOption;
    option = {
      title: {
        text: "文章数据统计分析",
        left: 50,
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        left: "right",
        data: [
          {
            name: "浏览量",
            icon: "circle",
          },
          {
            name: "点赞量",
            icon: "rect",
          },
          {
            name: "收藏量",
            icon: "triangle",
          },
          {
            name: "关注量",
            icon: "diamond",
          },
        ],
      },
      xAxis: {
        type: "category",
        data: this.pastDays,
      },
      yAxis: {
        type: "value",
      },
      //   减少图表边距、空白
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      //   需要设置name，tooltip才能显示
      series: [
        {
          type: "line",
          name: "浏览量",
          smooth: true,
          symbol: "circle",
          symbolSize: 10,
          data: [1, 2, 13, 4, 5, 6, 7],
          //   绘制平均数线
          markLine: {
            data: [{ type: "average", name: "平均值" }],
          },
        },
        {
          type: "line",
          name: "点赞量",
          smooth: true,
          symbol: "rect",
          symbolSize: 10,
          data: [1, 2, 32, 43, 5, 6, 7],
          markLine: {
            data: [{ type: "average", name: "平均值" }],
          },
        },
        {
          type: "line",
          name: "收藏量",
          smooth: true,
          symbol: "triangle",
          symbolSize: 10,
          data: [1, 22, 3, 14, 5, 6, 7],
          markLine: {
            data: [{ type: "average", name: "平均值" }],
          },
        },
        {
          type: "line",
          name: "关注量",
          smooth: true,
          symbol: "diamond",
          symbolSize: 10,
          data: [1, 3, 6, 8, 5, 6, 5],
          markLine: {
            data: [{ type: "average", name: "平均值" }],
          },
        },
      ],
    };
    option && this.myChart.setOption(option);
  }
  //   生成今天到前7天的日期
  getPastDays() {
    const today = new Date();
    const pastDays: string[] = [];
    for (let i = 6; i >= 0; i--) {
      const date = new Date(today);
      date.setDate(today.getDate() - i);
      const formattedDate = this.formatDate(date);
      pastDays.push(formattedDate);
    }
    console.log(pastDays);

    return pastDays;
  }
  //   格式化日期
  formatDate(date: Date): string {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return `${year}-${month}-${day}`;
  }
}
</script>

<style lang="scss" scoped>
</style>